<template>
  <div :style="{...styles}">
    <i  :style="{...iconStyle}" class=" el-icon-loading"></i>
  </div>
</template>

<script>
  import {transStrToHtmlDecode, formatColor} from '@/utils';
  import {mapState} from 'vuex';
  import {WidgetIcon} from "@/modules/IDE/widget/atom/widgetIcon";
  export default {
    name: 'IconWidget',
    props: {
      widget: {
        type: WidgetIcon,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {};
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      // icon() {
      //   const {values = {}} = this.state;
      //   const {icon = ''} = values;
      //   return transStrToHtmlDecode(`&#x${icon};`);
      // },
      styles() {
        const {tempRect = {}} = this.widget;
        const styles = {};
        const {height: sHeight = 0} = tempRect;
        sHeight && (styles.lineHeight = `${sHeight}px`);
        styles.textAlign = 'center';
        return styles;
      },
      iconStyle() {
        const {iconStyle = {}} = this.state;
        const iconStyles = {};
        // 字体

        const {size: fSize, color} = iconStyle;
        fSize && (iconStyles.fontSize = `${fSize}px`);
        color && (iconStyles.color = formatColor(color, this.activeTheme));
        return iconStyles;
      },
    },
  };
</script>

<style scoped>
</style>
